<!-- <custom-tabs :menus="menus" :activeName="menus[0].key" v-on:tabsClick="tabsClick"></custom-tabs>
menus: 展示列表，目前包括key，value
activeName： 默认选择传入默认的key值
tabsClick： 点击事件响应
tabType: tab类型 type="card"时是卡片类型 type="是正常标签类型"
-->

<template>
  <el-tabs v-model="activeKey" @tab-click="handleClick" :type="tabType">
    <el-tab-pane
      v-for="item in menus"
      :label="item.value"
      :name="item.key"
      :key="item.key"
    >
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
@Component({
  name: 'CustomTabs',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private menus!: []
  @Prop({ default: '' }) private activeName!: string
  @Prop({ default: '' }) private tabType!: string

  private activeKey = ''
  created() {
    console.log(this.menus)
    this.activeKey = this.activeName
  }
  @Watch('activeName')
  private function(newValue: any, oldValue: any) {
    this.activeKey = newValue
  }

  private handleClick(tab: any, event: any) {
    this.$emit('tabsClick', this.activeKey)
  }
}
</script>

<style lang="scss">
.el-tabs__nav-wrap::after {
  background-color: #e0e6ed;
}

.el-tabs__item {
  color: #8492a6;
  font-size: 14px;
  padding: 0px 40px;
}

.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}

.el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 20px;
}
</style>
